<template>
    <div>
        {{workSearchFrom}}
        <!--        条件查询-->
        <el-form :inline="true" :model="workSearchFrom" class="demo-form-inline" style="text-align: left">

            <el-form-item>
                <el-input v-model="workSearchFrom.ename" placeholder="员工姓名"></el-input>
            </el-form-item>

            <el-form-item>
                <el-input v-model="workSearchFrom.city" placeholder="员工住址"></el-input>
            </el-form-item>

            <el-from-item>
                <el-select v-model="workSearchFrom.cid" placeholder="所在部门">
                    <el-option label="所有部门" value="0"/>
                    <el-option v-for="c in dept" :label="c.dname" :value="c.did"/>
                </el-select>
            </el-from-item>

            <el-form-item>
                <el-button type="primary" @click="search" size="middle" plain style="margin-left: 20px">查询</el-button>
                <el-button type="primary" @click="add" size="middle" plain style="margin-left: 20px">添加</el-button>
                <el-button type="primary" @click="handleDelete" size="middle" plain style="margin-left: 20px">批量删除</el-button>
            </el-form-item>

        </el-form>

        <!--        员工列表展示-->
        <el-table
            :data="workers"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection">
            </el-table-column>
            <!--prop:对应字段的名字-->
            <el-table-column
                    label="员工ID"
                    prop="eid"
                    align="center"
                    width="110">
            </el-table-column>

            <el-table-column
                    label="姓名"
                    prop="ename"
                    align="center"
                    width="180">
            </el-table-column>

            <el-table-column
                    label="入职日期"
                    prop="bdate"
                    align="center"
                    width="150">
            </el-table-column>

            <el-table-column
                    label="性别"
                    prop="sex"
                    align="center"
                    width="150">
            </el-table-column>

            <el-table-column
                    label="城市"
                    prop="city"
                    align="center"
                    width="150">
            </el-table-column>

            <el-table-column
                    label="部门"
                    prop="did"
                    align="center"
                    width="180">
            </el-table-column>

            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
<!--        分页功能,@表示事件(方法)  :表示变量-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next"
                :total="total">
        </el-pagination>
<!--编辑对话框-->
        <el-dialog :title="title" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
            {{wor}}
            <el-form :model="wor" :rules="rules" ref="ruleForm">

                <el-form-item label="员工姓名" :label-width="formLabelWidth" align="left" prop="ename">
                    <el-input v-model.number="wor.ename" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="入职日期" :label-width="formLabelWidth" align="left" prop="bdate">
                        <el-date-picker type="date" placeholder="选择日期" v-model="wor.bdate" ></el-date-picker>
                </el-form-item>

                <el-form-item label="员工性别" :label-width="formLabelWidth" prop="sex" align="left">
                    <el-radio v-model="wor.sex" label="男" value="男"/>
                    <el-radio v-model="wor.sex" label="女" value="女"/>
                </el-form-item>
                <el-form-item label="所在城市" :label-width="formLabelWidth" prop="city">
                    <el-input v-model.number="wor.city" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所在部门" :label-width="formLabelWidth" align="left" prop="did">
                    <el-select v-model="wor.did">
                        <el-option v-for="c in dept" :label="c.dname" :value="c.did"/>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script>
    import list from "@/views/dept/list";

    export default {
        data() {
            return {
                // 员工数组
                workers:[],
                //当前第几页的默认值
                page:1,
                //每页的大小
                pageSize:5,
                //数据总数
                total:100,
                workSearchFrom:{},
                dept:[],//所有部门
                dialogFormVisible:false,  //编辑对话框打开/关闭
                formLabelWidth:'100px',
                wor:{},  //表单中关联的员工对象
                title:'',  //修改表单标题
                multipleSelection:[],  //勾选的对象数组
                eids:[],//编号的数组
                rules:{
                    //验证用户名
                    ename:[
                        //非空验证,关注焦点离开时验证
                        { required: true, message: '请输入员工姓名', trigger: 'blur' },
                    ],
                    bdate:[
                        { required: true, message: '请输入入职日期', trigger: 'blur' },
                    ],
                    //自定义验证规则
                    sex:[
                        {required: true,  message: '请输选择员工性别',trigger:'change'}
                    ],
                    city:[
                        { required: true, message: '请输入员工住址', trigger: 'blur' },
                    ],
                    did:[
                        { required: true, message: '请选择部门编号', trigger: 'change' },
                    ]
                }
            }
        },
        created() {
            //查询所有员工
            this.findWorkers();
            //分页查询
            // this.findByPage();
            this.findDepts();
            //条件查询带分页
            this.search();
        },
        methods: {
            findWorkers() {
                this.$axios.get("/worker?cmd=list").then(({data})=> {
                    if (data.code === 0) {
                        this.workers=data.list
                    }
                })

            },
            //修改员工
            add(){
                this.title='添加员工'
                //打开对话框
                this.dialogFormVisible=true;
                //清空表单数据
                this.wor={}
            },
            //修改员工信息
            handleEdit(index, row) {
                //打开对话框
                this.dialogFormVisible=true;
                this.title='修改员工';
                //绑定表单数据
                this.wor=row
            },
            //删除员工
            handleDelete(index, row) {
                let _this=this
                //处理要删除的员工ID数组,得到要删除的eid
                if (row){
                    this.eids=[row.eid]
                }else {
                    this.eids=this.multipleSelection.map(m=>m.eid)
                }
                //确认删除
                    this.$confirm(`此操作将永久删除学号为${this.eids}的员工, 是否继续?`, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //点击确定后,向后台发送数据
                        this.$axios.get(`/worker?cmd=delete&eids=${this.eids}`)
                            .then(({data})=> {
                                //如果添加修改成功,则执行一次查询方法刷新页面
                                if (data.code === 0) {
                                    this.$message({
                                        type: 'success',
                                        message: data.message,
                                        onClose(){
                                            _this.search()
                                        }
                                    });
                                }
                            })
                    })
            },
            // 分页查询((page-1)*pageSize(从第几条开始),pageSize(查询几条))
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize=val
                this.search()
            },
            //更改页数时触发的事件
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.page=val
                this.search()
            },
            findByPage(){
                //发送请求
                this.$axios.get(`/worker?cmd=findByPage&page=${this.page}&pageSize=${this.pageSize}`)
                    .then(({data})=> {
                    if (data.code === 0) {
                        // pr分页对象(PageResult对象)
                        //rows分页集合
                        this.workers=data.pr.rows
                        //总记录数
                        this.total=data.pr.total
                    }
                })
            },
            findDepts(){
                //发送请求
                this.$axios.get(`/dept`)
                    .then(({data})=> {
                    if (data.code === 0) {
                        this.dept=data.list
                    }
                })
            },
            search(){
                let worStr=JSON.stringify(this.workSearchFrom)
                this.$axios.post(`/worker?cmd=search&page=${this.page}&pageSize=${this.pageSize}`,"stud="+worStr)
                    .then(({data})=> {
                        if (data.code === 0) {
                            //rows分页集合
                            this.workers=data.pr.rows
                            //总记录数
                            this.total=data.pr.total                        }
                    })
            },
            //确定保存数据
            //通过eid的值判断是添加还是修改
            save(){
                let url="/worker?cmd=add"
                let _this=this
                if (this.wor.sid){  //有值则为修改
                    url="/worker?cmd=update"
                }
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        //表单中每一项都验证通过才提交数据到后台
                        this.$axios.post(url,"wor="+JSON.stringify(this.wor))
                            .then(({data})=> {
                                //如果添加修改成功,则执行一次查询方法刷新页面
                                if (data.code === 0) {
                                    _this.search()
                                }
                                _this.dialogFormVisible = false
                            })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log("选择行:"+val)
            }
        }
    }
</script>
<style scoped>
    .el-pagination{
        text-align: right;
        margin-top: 10px;
    }

</style>
